<template>
  <qh-page-view :showNavbar="false" bgColor="#fff">
    <view class="fixed-header" :style="headerStyle">
      <uni-status-bar></uni-status-bar>
      <view class="search-box flex-cn">
        <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
          <view style="width: 100rpx; text-align: center; color: #fff"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon" :class="{ 'icon-dark': isScrolled }">
          </view>
        </view>

        <view class="header-title" style="color: #fff; font-weight: 600" :class="{ 'text-dark': isScrolled }">
          送{{ title }}
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
    </view>

    <view class="benner_box">
      <image class="benner_img"
        :src="banner_image"
        mode="aspectFill"></image>
      <view class="benner_title">
        <bubble :bubbleItems="customBubbleItems" v-model="showBubble" @update:bubbleItems="handleBubbleItemsUpdate"
          ref="bubbleRef"></bubble>
      </view>
    </view>

    <view class="outer-box">
      <view class="benner_content">
        <view class="benner_bg_red"></view>
        <view class="benner_content_box">
          <view class="obj-product-list">
            <view class="obj-product-card" v-for="(item, index) in suggest_list" :key="index">
              <view class="obj-card-content">
                <view class="obj-product-card-content" @click="handleBuy(item)">
                  <image class="obj-product-image" :src="item.goods_image" mode="aspectFit" />

                  <view class="obj-product-info">
                    <view class="obj-product-title">{{ item.goods_name }}</view>

                    <view class="obj-price-area">
                      <view class="obj-tag-container">
                        <!-- <view class="obj-tag">{{ item.tag }}</view> -->
                      </view>

                      <view class="obj-bottom-container">
                        <view style="
                              display: flex;
                              align-items: center;
                              flex-direction: column;
                            ">
                          <image
                            src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17338083046757d0b0aba4f.png"
                            mode="aspectFit" style="width: 56px; height: 18px"></image>

                          <view class="obj-price">
                            <!-- <text class="obj-currency">¥</text> -->
                            <text class="obj-amount">¥{{ item.online_price }}</text>

                            <view class="temperature-box1" v-if="item.rebate > 0">
                                {{ item.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
                            </view>
                          </view>

                        </view>
                        <view @click="handleBuy(item)">
                          <buy-button buttonText="立即加购"></buy-button>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
    </view>

    <view class="bottom-container">
      <!-- 这里可以放置底部内容 -->
      <view class="outer-box">
        <view class="benner_content1">
          <view class="benner_bg_red1"></view>
          <view class="benner_content_box1">
            <view class="bottom-content">
              <view class="banner-container">
                <image class="banner-image"
                  src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17338150416757eb016131d.png"
                  mode="aspectFit" />
                <view class="options">
                  <view @click="sortBySales" class="option" :class="{ active: activeTab === '1' }">
                    <text>销量</text>
                    <view class="triangle-icons">
                      <view class="triangle-icon triangle-icon-up" :class="{ active: activeTab === '1' && isActiveUp }">
                      </view>
                      <view class="triangle-icon triangle-icon-down"
                        :class="{ active: activeTab === '1' && isActiveDown }"></view>
                    </view>
                  </view>
                  <view @click="sortByPrice" class="option" :class="{ active: activeTab === '2' }">
                    <text>价格</text>
                    <view class="triangle-icons">
                      <view class="triangle-icon triangle-icon-up" :class="{ active: activeTab === '2' && isActiveUp }">
                      </view>
                      <view class="triangle-icon triangle-icon-down"
                        :class="{ active: activeTab === '2' && isActiveDown }"></view>
                    </view>
                  </view>
                </view>
              </view>

              <scroll-view scroll-y class="product-scroll" @scrolltolower="loadMore"
                :style="{ height: scrollHeight + 'px' }">
                <view class="product-grid">
                  <view class="product-item" v-for="(item, index) in productList" :key="index">
                    <view @click="handleBuy(item)">
                      <buy-button class="buy-button-item" buttonText="立即加购"></buy-button>
                    </view>

                    <view class="product-item-content" @click="handleBuy(item)">
                      <image class="product-image" :src="item.goods_image" mode="aspectFit" />
                      <view class="product-info">
                        <view class="product-title">{{ item.goods_name }}</view>
                        <view class="product-price">
                          <text class="obj-currency">¥</text>
                          <text style="font-size: 36rpx">{{
                            item.online_price
                          }}</text>

                          <view class="temperature-box">
                            {{ item.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <!-- 底部加载提示 -->
                <view class="loading-tips" v-if="productList.length > 0">
                  <view v-if="isLoading" class="loading">加载中...</view>
                  <view v-else-if="!hasMore" class="no-more">没有更多数据了</view>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </qh-page-view>
</template>

<script>
import BuyButton from "@/components/buy-button/buy-button.vue";

export default {
  name: "obj_details",
  components: {
    BuyButton,
  },
  data() {
    return {
      banner_image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735610950677352463b175.png",
      title: "",
      suggest_list: [], //推荐的四个
      productList: [],
      page: 1,
      limit: 10,
      hasMore: true,
      isLoading: false,
      scrollHeight: 0,
      isTop: true,
      opacity: 1,
      bubbleItems: [],
      showBubble: false, // 控制气泡显示
      customBubbleItems: [
        { text: "爱人", active: false, id: "19" },
        { text: "老人", active: true, id: "20" },
        { text: "亲戚", active: false, id: "25" },
        { text: "好友", active: false, id: "26" },
        { text: "孩童", active: false, id: "18" },
        { text: "合作伙伴", active: false, id: "24" },
        { text: "领导", active: false, id: "23" },
        { text: "同事", active: false, id: "21" },
        { text: "其他", active: false, id: "22" },
      ],
      activeTab: "", // 当前激活的tab
      isActiveUp: false, // 价格升序激活
      isActiveDown: false, // 价格降序激活
      isScrolled: false,
      label_id: "",
    };
  },
  computed: {
    headerStyle() {
      return `background-image: ${this.isTop
          ? 'url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17337434366756d34caea20.png")'
          : "none"
        }`;
    },
    styleColor() {
      return `color: ${this.isTop ? "#fff" : "#000 "}`;
    },
  },

  mounted() {
    // 计算scroll-view高度
    const systemInfo = uni.getSystemInfoSync();
    // 这里的200是其他内容的大致高度，需要根据实际情况调整
    this.scrollHeight = systemInfo.windowHeight - 200;
  },


  methods: {
    handleBuy(item) {
      console.log("点击购买:", item);
      // 处理购买逻辑
      uni.navigateTo({
        url: "/pages/mer/goods/details/details?id=" + item.id,
      });
    },
    async getObjToDetails() {
      const res = await this.$request(
        "SmallProgramApi/NewYear/getHostGoodsLimit",
        {
          label_id: this.label_id,
          store_id: this.$store.mallStoreId,
          merchant_id: 1,
          source_type: 2,
        }
      );

      console.log("this.sort", this.sort);
      if (res.data) {
        this.suggest_list = res.data;
        console.log(this.suggest_list);
      }
    },

    // 加载更多
    async loadMore() {
      if (this.isLoading || !this.hasMore) return;

      this.page++;
      await this.getProductList(true);
    },

    // 获取商品列表
    async getProductList(isLoadMore = false) {
      if (this.isLoading) return;

      try {
        this.isLoading = true;
        const res = await this.$request(
          "SmallProgramApi/ShiFu/getLabelGoodList",
          {
            label_id: this.label_id,
            store_id: this.$store.mallStoreId,
            merchant_id: 1,
            page: this.page,
            limit: this.limit,
            sort: this.sort,
          }
        );

        if (res.data) {
          if (isLoadMore) {
            this.productList = [...this.productList, ...res.data];
          } else {
            this.productList = res.data;
          }

          // 更新是否还有更多数据
          this.hasMore = res.data.length >= this.limit;
        }
      } catch (error) {
        console.log("错误", error);
      } finally {
        this.isLoading = false;
      }
    },

    // 重置列表
    resetList() {
      this.page = 1;
      this.hasMore = true;
      this.productList = [];
      this.getProductList();
    },

    backHome() {
      uni.navigateBack();
    },
    handleBubbleClick(index) {
      this.bubbleItems.forEach((item, i) => {
        item.active = i === index;
      });
    },
    async handleBubbleItemsUpdate(newItems) {
      // 显示loading
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });

      try {
        this.customBubbleItems = newItems;
        const activeItem = newItems.find((item) => item.active);
        if (activeItem) {
          this.label_id = activeItem.id;
          this.title = activeItem.text;
          await this.resetList();
          await this.getProductList();
          await this.getObjToDetails();
        }
        this.$refs.bubbleRef.handleSwitchChange();
      } catch (error) {
        console.error("加载失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      } finally {
        // 无论成功还是失败都关闭loading
        uni.hideLoading();
      }
    },
    // 销量排序
    sortBySales() {
      this.activeTab = "1";
      if (!this.isActiveUp && !this.isActiveDown) {
        this.isActiveUp = true;
        this.isActiveDown = false;
        this.sort = "";
      } else if (this.isActiveUp) {
        this.isActiveUp = false;
        this.isActiveDown = true;
        this.sort = 1;
      } else {
        this.isActiveUp = false;
        this.isActiveDown = false;
        this.sort = "";
      }
      this.resetList();
    },

    // 价格排序
    sortByPrice() {
      this.activeTab = "2";
      if (!this.isActiveUp && !this.isActiveDown) {
        // 首次点击，升序
        this.isActiveUp = true;
        this.isActiveDown = false;
        this.sort = 2;
        console.log("2");
      } else if (this.isActiveUp) {
        // 第二次点击，降序
        this.isActiveUp = false;
        this.isActiveDown = true;
        this.sort = 3;
        console.log("3");
      } else {
        // 第三次点击，取消排序
        this.isActiveUp = false;
        this.isActiveDown = false;
        this.sort = "";
        console.log("价格取消");
      }
      this.resetList();
    },
  },
  onLoad(options) {
    if (options.bubbleItems) {
      try {
        this.label_id = options.id;

        const bubbleItems = JSON.parse(decodeURIComponent(options.bubbleItems));
        this.customBubbleItems = bubbleItems;
        this.title = options.title;

        this.banner_image = options.image;
        this.getProductList();
        this.getObjToDetails();
      } catch (error) {
        console.error("Error parsing bubble items:", error);
      }
    }
  },
  onReachBottom() {
    // 如果还有更多数据且当前不在加载中，则加载下一页
    if (this.pageInfo.hasMore && !this.isLoading) {
      this.getProductList(true);
    }
  },
};
</script>


<style scoped>
.temperature-box1 {
  background-color: #C39646;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  color: #FFFFFF;
  font-size: 20rpx;
  height: 28rpx;
  text-align: center;
  padding: 5rpx;
  line-height: 28rpx;
}

.temperature-box {
  background-color: #C39646;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  color: #FFFFFF;
  font-size: 20rpx;
  margin-top: 8rpx;
  height: 28rpx;
  text-align: center;
  padding: 5rpx;
  line-height: 28rpx;
  width: 50%;
}


.banner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.banner-image {
  width: 362rpx;
  height: 152rpx;
  margin-bottom: 10rpx;
}

.options {
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin-top: 20rpx;
}

.option {
  font-size: 28rpx;
  color: white;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 20rpx;
  transition: color 0.3s;
  position: relative;
}

.option.active {
  color: black;
}

.triangle-icons {
  display: flex;
  flex-direction: column;
  margin-left: 3px;
  gap: 2px;
}

.triangle-icon {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.triangle-icon-up {
  border-bottom: 5px solid white;
}

.triangle-icon-down {
  border-top: 5px solid white;
}

.triangle-icon-up.active {
  border-bottom-color: black;
}

.triangle-icon-down.active {
  border-top-color: black;
}
</style>
<style lang="scss" scoped>
.benner_content1 {
  padding: 20rpx;
  background-color: #fff;
  position: relative;
  overflow: visible;
  padding-bottom: 40rpx;

  .benner_bg_red1 {
    position: absolute;
    top: 124rpx;
    height: calc(85% + 90rpx);
    left: 50%;
    transform: translateX(-50%);
    width: 646rpx;
    background-color: #da5252;
  }
}

.benner_content_box1 {
  // background-color: #fff;
  // padding: 24rpx;
  position: relative;
  z-index: 10;
  border-radius: 16rpx;
}

.benner_content_box {
  // background-color: #fff;
  // padding: 24rpx;
  position: relative;
  z-index: 10;
  border-radius: 16rpx;
}

.benner_content {
  padding: 20rpx;
  background-color: #fff;
  position: relative;
  overflow: visible;
  padding-bottom: 40rpx;

  .benner_bg_red {
    position: absolute;
    top: -45rpx;
    height: calc(100% + 90rpx);
    left: 50%;
    transform: translateX(-50%);
    width: 646rpx;
    background-color: #da5252;
  }
}


/* iPhone X, XS, 11 Pro, 12 Pro, 13 Pro */
// @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
//   (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3),
//   (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
//   .fixed-header {
//     height: calc(102rpx + var(--status-bar-height) + 44px);
//   }

//   .benner_box {
//     margin-top: calc(102rpx + var(--status-bar-height) + 44px);
//   }
// }

.benner_title {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 100%;
}

.benner_img {
  width: 100%;
  height: 684rpx;
  display: block;
}

.header_img {
  height: calc(88px + var(--safe-area-top, 20px));
  width: 100%;
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17337434366756d34caea20.png");
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  left: 0;
  top: 0;
  transition: opacity 1s;
}


.bottom-message {
  color: #ccc;
  font-size: 24rpx;
  // background-color: #fff;
  width: 100%;
  padding: 10rpx 0;
}

.line {
  width: 40%;
  height: 1px;
  background-color: #ccc;
}

.search-box {
  height: 102rpx;
  // padding: 12rpx 24rpx;
  // box-sizing: border-box;
  // box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
  z-index: 1;

  .search-content {
    height: 64rpx;
    width: 448rpx;
    padding: 0 0 0 24rpx;
    border: 2rpx solid var(--primary-color);
    border-radius: 34rpx;
    box-sizing: border-box;
    background-color: #ffffff;

    .search-icon {
      font-size: 28rpx;
      color: #999999;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
      line-height: 48rpx;
      color: #333333;
      margin: 0 10rpx;
      height: 48rpx;
    }

    .search-btn {
      width: 124rpx;
      height: 100%;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
      line-height: 48rpx;
      // background-color: var(--primary-color);
      border-radius: 32rpx;
      margin-right: -1rpx;
    }
  }
}
</style>

<style lang="scss" scoped>
.obj-product-card-content {
  border: 2px solid #e0b879;
  width: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid transparent;
  border-image: linear-gradient(125deg,
      rgba(224, 184, 121, 1),
      rgba(249, 221, 179, 1),
      rgba(234, 189, 156, 1)) 2;
  padding: 2rpx;
}

.obj-product-list {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.obj-product-card {
  background: #fff;
  margin: 10px;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 10px;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
}

.obj-card-content {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 244rpx;
  background: #fff;
}

.obj-product-image {
  width: 180rpx;
  height: 180rpx;
  margin: 30rpx;
  flex-shrink: 0;
}

.obj-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 30rpx;
  height: 180rpx;
}

.obj-product-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: 100%;
  // height: 80rpx;
  margin: 0;
  padding: 0;
}

.obj-price-area {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.obj-tag-container {
  margin: 0;

  .obj-tag {
    display: inline-block;
    padding: 4rpx 12rpx;
    background: #fff2e5;
    color: #c72525;
    font-size: 24rpx;
    border-radius: 4rpx;
  }
}

.obj-bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.obj-price {
  display: flex;
  align-items: baseline;
  flex-direction: column; 
  .obj-currency {
    font-size: 24rpx;
    color: #c72525;
    margin-right: 2rpx;
  }

  .obj-amount {
    font-size: 36rpx;
    color: #c72525;
    font-weight: bold;
  }
}

.obj-buy-button {
  background: #c72525;
  color: #fff;
  font-size: 26rpx;
  padding: 10rpx 32rpx;
  border-radius: 30rpx;
  border: none;
  line-height: 1.5;
  margin: 0;
  min-width: 140rpx;
  text-align: center;
}
</style>

<style lang="scss" scoped>
.bottom-container {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
  /* 可选：添加上方阴影 */
  padding-bottom: env(safe-area-inset-bottom);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 336rpx);
  gap: 30rpx;
  // box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  padding-bottom: env(safe-area-inset-bottom);
}

.product-item {
  width: 336rpx;
  height: 458rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 10rpx;
  box-sizing: border-box;
  position: relative;
}

.product-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  background-color: #fff;
  border: 2px solid #e0b879;
  box-sizing: border-box;
  padding: 30rpx;
}

.product-image {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 10rpx;
}

.product-info {
  text-align: left;
  width: 100%;
  padding: 0 10rpx;
}

.product-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}

.product-price {
  color: #c72525;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.buy-button {
  background: #c72525;
  color: #fff;
  font-size: 26rpx;
  padding: 10rpx 32rpx;
  border-radius: 30rpx;
  border: none;
  text-align: center;
}

.buy-button-item {
  position: absolute;
  bottom: -15rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<style lang="scss" scoped>
.benner_box {
  position: relative;
  width: 100%;
  margin-top: calc(102rpx + 44px);
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: calc(102rpx + 44px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #ffffff;
}

// 普通屏幕的体查询（非刘海屏）
@media screen and (device-width: 375px) and (device-height: 667px),
/* iPhone 6/7/8 */
screen and (device-width: 414px) and (device-height: 736px),
/* iPhone 6/7/8 Plus */
screen and (device-width: 360px) and (device-height: 640px)
/* 常见安卓机型 */
  {
  .benner_box {
    margin-top: 102rpx; // 普通屏幕只需要导航栏高度
  }

  .fixed-header {
    height: 102rpx;
    padding-top: 0;
  }
}
</style>

<style lang="scss" scoped>
.product-scroll {
  width: 100%;
  background: #fff;
}

.loading-tips {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
      content: "";
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
      border: 2px solid #ddd;
      border-top-color: #666;
      border-radius: 50%;
      animation: loading 0.8s linear infinite;
    }
  }

  .no-more {
    color: #999;
  }
}

@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}
</style>